<template>
	<w-container class="sign_in plr-16">
		<w-navbar id='my-nav' placeholder title="" bgColor="transparent" leftIcon="back-btn-white"></w-navbar>
		<view class="main pa-12 bg-color-white br-12">
			<view class="header font-color-textPrimary font-size-14">您已连续签到 {{userInfo.activity_sign_day}} 天</view>
			<view class="flex flex-w flex-js-sb">
				<view :class="`item mt-20 ptb-8 flex flex-dir-col flex-ai-center ${index>=6?'seven':''}`"
					v-for="(item,index) in signData.data" :key="item.id">
					<view :class="`mb-4 ${item.isToday?'today_top':''}`">第 {{index+1}} 天</view>
					<w-icon :name="`${item.isToday?'to_sign':'un_sign'}`" size="28"
						v-if="index<6 && item.status!=2"></w-icon>
					<w-icon :name="`on_sign`" size="28" v-if="index<6 && item.status==2"></w-icon>
					<w-icon name="sign_gift" size="28" v-if="index>=6 && item.status!=2"></w-icon>
					<view :class="`mt-4 ${item.isToday?'today':''}`" v-if="item.status == 0">
						{{item.isToday?'立即签到':'待签到'}}
					</view>
					<view :class="`mt-4 ${item.isToday?'today':''}`" v-if="item.status == 1">
						{{item.isToday?'立即签到':'未签到'}}
					</view>
					<view :class="`mt-4 ${item.isToday?'today':''}`" v-if="item.status == 2">
						已签到
					</view>
				</view>
			</view>
		</view>
		<view class="rule pa-12 br-12 bg-color-white mt-12">
			<view class="flex flex-ai-center">
				<w-icon name="title-icon" size="16"></w-icon>
				<view class="font-color-textPrimary font-size-14 font-w-bold ml-4">签到规则</view>
			</view>
			<view class="rule mt-20  font-size-14 font-color-999">
				{{signData.rule}}
			</view>
		</view>
		<view class="action bg-color-pageBg">
			<view class="shop-action-container flex flex-js-sb flex-ai-center">
				<w-button style='width:100%' shape="circle"
					:disabled="!signData.today_is_sign || userInfo.activity_sign_day == 7"
					@click='handleSign'>{{signData.today_is_sign?'立即签到':'已签到'}}
				</w-button>
			</view>
		</view>
		<w-modal :show="expendShow" title="签到提示" @action="expendAction">
			<view class="expend flex flex-dir-col flex-ai-center pt-16"
				v-if="signData.true_materials&&signData.true_materials.length">
				<w-image :src="signData.true_materials[0].listimg" width="70" height="70" radius="8"></w-image>
				<view class="font-color-textPrimary font-size-16 font-w-500 mt-16">{{signData.true_materials[0].name}}
				</view>
				<view class="font-color-666 font-size-14 mt-16">是否消耗该藏品完成今日签到？</view>
			</view>
		</w-modal>
		<w-modal :show="haveShow" title="提示" @action="haveAction" submitText="去购买">
			<view class="expend flex flex-dir-col flex-ai-center pt-16"
				v-if="signData.true_materials&&signData.true_materials.length">
				<w-image :src="signData.true_materials[0].listimg" width="70" height="70" radius="8"></w-image>
				<view class="font-color-textPrimary font-size-16 font-w-500 mt-16">{{signData.true_materials[0].name}}
				</view>
				<view class="font-color-666 font-size-14 mt-16">您暂无该藏品，是否去购买？</view>
			</view>
		</w-modal>
		<w-modal :show="sevenShow" title="" submitText="去购买" :showButton="false" close @change="sevenShow = false">
			<view class="seven_pop flex flex-dir-col flex-ai-center pt-16"
				v-if="signData.true_materials&&signData.true_materials.length">
				<w-image src="/static/signIn/seven_sgin.png" width="265" height="173" class="seven_img"></w-image>
				<view class="font-color-textPrimary font-size-16 font-w-500 mt-16">恭喜完成7日连签
				</view>
				<view class="font-color-666 font-size-14 mt-16">等待平台空投奖励</view>
			</view>
		</w-modal>
	</w-container>
</template>

<script>
	import {
		signIndex,
		start
	} from '@/api/signIn/signIn.js'
	import {
		mapActions
	} from 'vuex'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				signData: {},
				expendShow: false,
				haveShow: false,
				sevenShow: false
			}
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			async getIndexInfo() {
				const res = await signIndex().catch(() => {
					if (res.code == 0) {
						setTimeout(() => {
							this.backPage();
						}, 1500)
					}
				})
				if (res.data.data.length) {
					const now = dayjs().format('YYYY-MM-DD');
					res.data.data.forEach(i => {
						if (i.day == now) {
							i.isToday = true
						}
					})
				}
				this.signData = res.data
			},
			async expendAction(e) {
				if (e) {
					uni.showLoading({
						title: '签到中'
					})
					const res = await start()
					uni.hideLoading()
					if (res.code == 1) {
						this.getIndexInfo()
						this.expendShow = false
						this.getUserInfo().then(() => {
							if (this.userInfo.activity_sign_day == 7) {
								this.sevenShow = true
							}
						})
					}
				} else {
					this.expendShow = false
				}
			},
			haveAction(e) {
				if (e) {
					this.haveShow = false
					uni.switchTab({
						url: '/pages/market/market'
					})
				} else {
					this.haveShow = false
				}
			},
			handleSign() {
				if (this.signData.can_sign != 1) {
					this.haveShow = true
				} else {
					this.expendShow = true
				}
			}
		},
		onLoad() {
			this.getIndexInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.sign_in {
		background: url($IMG_URL + '/static/signIn/sign_in-bg.png');
		background-repeat: no-repeat;
		background-size: 750rpx;
		padding-top: 306rpx;
	}

	.action {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.shop-action-container {
			@extend .plr-16, .ptb-8, .flex;
			height: 120rpx;
			width: 100%;


			.price {
				font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
				font-weight: 500;
			}

			.action-btn.no-sub {
				background: linear-gradient(180deg, #434976 0%, #232744 100%);
				;
				@extend .font-color-white;
				border: none;

				/deep/ .u-count-down__text {
					@extend .font-size-12,
					.font-color-white;
				}
			}

			.action-btn {
				width: 480rpx;
				height: 92rpx;
				@extend .border-color-dark,
				.font-color-dark;
				border: 1px solid;
				border-radius: 66rpx;

				/deep/ .u-count-down__text {
					@extend .font-size-12,
					.font-color-dark;
				}
			}
		}


	}

	.item {
		width: 140rpx;
		background: #FFF7F7;
		border-radius: 12rpx;
		font-size: 24rpx;
		color: #999;
	}

	.today_top {
		color: #222;
		font-weight: 500;
	}

	.today {
		color: #9F2825;
		font-weight: 500;
	}

	.seven {
		width: 303rpx;
	}

	.seven_pop {
		position: relative;

		.seven_img {
			position: absolute;
			top: -160%;
		}
	}
</style>